import React from 'react';
import {observable, action, makeObservable, autorun, computed,reaction,configure,runInAction} from "mobx";
import { Button } from "antd";
import { observer } from "mobx-react";

configure({
    enforceActions: 'always'//强制使用action方式修改状态
})

class State {
    constructor() {
        makeObservable(this, {
            num: observable,
            change: action,
            // total:computed,
            // count: observable,
            // price: observable,
            // changeCount: action,
        });
    }

    num = 10;

    // count = 1;
    //
    // price = 10;

    change() {
        console.log(this);
        this.num++;
        console.log(this.num);
    }

    // changeCount(){
    //     this.count++;
    // }
    //
    // get total(){
    //     console.log("total");
    //     return this.count*this.price;
    //
    // }
}





// reaction(
//     ()=>[state.num],
//     ()=>{
//         console.log(state.num,'reaction');
//     }
// )
const state = new State();
const MobxComp  = observer(()=>{
    // autorun(() => {
    //     console.log(state.total,'autorun');
    // })

    setTimeout(()=>{
       runInAction(()=>{
           state.num = 100;
       })
    },2000)
    // setTimeout(()=>{
    //     let fun = state.change;
    //     fun();
    // },2000)



        return (
            <div>
                <div>数量: {state.num}</div>
                <div>
                    <Button onClick={() => state.change()}>+</Button>
                </div>
            </div>
        );
})

export default MobxComp;